Application Class এবং Ext.application কনফিগারেশন

Web Development - এক্সটিজেএস (ExtJS) - ExtJS এর বেসিক কনফিগারেশন |

ExtJS অ্যাপ্লিকেশনের জন্য Ext.application একটি এন্ট্রি পয়েন্ট, যা অ্যাপ্লিকেশনের পুরো স্ট্রাকচার এবং কনফিগারেশন পরিচালনা করে। এটি অ্যাপ্লিকেশনের Application ক্লাস লোড এবং সেটআপ করার জন্য ব্যবহৃত হয়।


Application Class

ExtJS এর Application ক্লাস অ্যাপ্লিকেশনের কেন্দ্রীয় ম্যানেজার হিসেবে কাজ করে। এটি বিভিন্ন কনফিগারেশন, কন্ট্রোলার, ভিউ, এবং স্টোর পরিচালনা করে। সাধারণত এই ক্লাসটি /app/Application.js ফাইলের মধ্যে থাকে।

Application.js এর উদাহরণ:

Ext.define('MyApp.Application', {
    extend: 'Ext.app.Application', // Application ক্লাসটি প্রসারিত করা
    name: 'MyApp',                // অ্যাপ্লিকেশনের নাম

    controllers: [
        'MainController'          // কন্ট্রোলার লিস্ট
    ],

    launch: function () {
        console.log('Application Launched'); // অ্যাপ্লিকেশন চালু হওয়ার পর প্রথমে যা হবে
    }
});

Application Class এর প্রধান বৈশিষ্ট্য

  • extend: Ext.app.Application থেকে প্রসারিত।
  • name: অ্যাপ্লিকেশনের নাম।
  • launch: অ্যাপ্লিকেশন চালু হলে প্রথমে যা সম্পন্ন হবে।
  • controllers: অ্যাপ্লিকেশনে ব্যবহৃত কন্ট্রোলার লিস্ট।
  • stores: ডেটা স্টোর লোড করার জন্য ব্যবহৃত।

Ext.application কনফিগারেশন

Ext.application হল ExtJS অ্যাপ্লিকেশনের এন্ট্রি পয়েন্ট, যা অ্যাপ্লিকেশন চালু করার জন্য প্রয়োজনীয় সেটআপ সম্পন্ন করে। এটি সাধারণত app.js ফাইলের মধ্যে ব্যবহৃত হয়।

উদাহরণ:

Ext.application({
    name: 'MyApp', // অ্যাপ্লিকেশনের নাম

    requires: [
        'MyApp.view.Main' // অ্যাপ্লিকেশন চালু করার জন্য প্রয়োজনীয় ক্লাস
    ],

    launch: function () {
        // অ্যাপ্লিকেশন চালু হওয়ার পর সম্পন্ন হওয়া কাজ
        Ext.create('MyApp.view.Main', {
            renderTo: Ext.getBody() // অ্যাপ্লিকেশনকে রেন্ডার করার এলিমেন্ট
        });
    }
});

Ext.application এর প্রধান কনফিগারেশন

  1. name
    • অ্যাপ্লিকেশনের নাম, যা ExtJS এর নেমস্পেস হিসেবে ব্যবহৃত হয়।
    • উদাহরণ:

      name: 'MyApp'
      
  2. requires
    • অ্যাপ্লিকেশনের জন্য প্রয়োজনীয় ক্লাস লোড করার লিস্ট।
    • উদাহরণ:

      requires: ['MyApp.view.Main']
      
  3. launch
    • অ্যাপ্লিকেশন লোড হওয়ার পর যেটি প্রথমে চালু হবে।
    • উদাহরণ:

      launch: function() {
          console.log('Application Started');
      }
      
  4. controllers
    • কন্ট্রোলার লিস্ট, যা অ্যাপ্লিকেশনে ব্যবহৃত হয়।
    • উদাহরণ:

      controllers: ['MainController']
      
  5. autoCreateViewport (পুরনো সংস্করণে)
    • স্বয়ংক্রিয়ভাবে ভিউপোর্ট তৈরি করে।
    • launch কনফিগারেশনের মাধ্যমে এটি প্রতিস্থাপিত হয়েছে।
  6. appFolder
    • অ্যাপ্লিকেশনের মূল ফোল্ডারের পথ।
    • ডিফল্ট: app/
    • উদাহরণ:

      appFolder: 'src/app'
      

Application Class এবং Ext.application এর সম্পর্ক

  • Ext.application অ্যাপ্লিকেশন চালু করার জন্য Application ক্লাসকে লোড করে।
  • Application ক্লাসে অ্যাপ্লিকেশনের বিভিন্ন কনফিগারেশন এবং লজিক থাকে।
  • Ext.application এর মাধ্যমে অ্যাপ্লিকেশনের প্রথম ভিউ বা প্যানেল তৈরি এবং দেখানো হয়।

একটি উদাহরণ প্রজেক্ট

app/Application.js:

Ext.define('MyApp.Application', {
    extend: 'Ext.app.Application',
    name: 'MyApp',

    launch: function () {
        console.log('Application Initialized');
    }
});

app/view/Main.js:

Ext.define('MyApp.view.Main', {
    extend: 'Ext.panel.Panel',
    title: 'Main Panel',
    html: 'Welcome to ExtJS!',
    renderTo: Ext.getBody()
});

app.js:

Ext.application({
    name: 'MyApp',
    requires: ['MyApp.view.Main'],
    launch: function () {
        Ext.create('MyApp.view.Main');
    }
});

সারসংক্ষেপ

  1. Application Class:
    • অ্যাপ্লিকেশনের কেন্দ্রীয় ম্যানেজার।
    • কন্ট্রোলার, স্টোর এবং লজিক পরিচালনা করে।
  2. Ext.application:
    • অ্যাপ্লিকেশন চালু করার এন্ট্রি পয়েন্ট।
    • অ্যাপ্লিকেশনের প্রথম ভিউ তৈরি এবং রেন্ডার করে।

এই দুটি উপাদান ExtJS অ্যাপ্লিকেশন তৈরি এবং পরিচালনার ভিত্তি গঠন করে।

Content added By
Promotion